import React from 'react'
import { useTranslation } from 'react-i18next';
import { Select } from 'antd';
// localStorage : 浏览器本地存储
function I18() {
  const { t, i18n } = useTranslation();
  const handleChange = (value: string) => {
    // console.log(`selected ${value}`);18n.changeLanguage(value) 切换当前语言
    i18n.changeLanguage(value)
    // 实现持久化
    localStorage.setItem('lng', value)
    // ;llllllllllllll
    // ooooooooo
  };
  return (
    <div>
      <Select
        defaultValue={localStorage.getItem('lng')}
        style={{ width: 120 }}
        onChange={handleChange}
        // options提供中文和英文两个选项
        options={[
          { value: 'zh', label: '中文' },
          { value: 'en', label: '英文' },

        ]}
      />
      <h2>姓名：{t('name')}</h2>
      <h2>年龄：{t('age')}</h2>
      <h2>国家：{t('form')}</h2>

    </div>
  )
}

export default I18
